.cross input {
  display: none;
}

label {
  display: block;
  cursor: pointer;
  position: absolute;
  width: 50vw;
  height: 50vw;
  max-width: 100px;
  max-height: 100px;
  overflow: hidden;
}

.menu--1 label{
  right: 0;
  bottom: 0;
}

path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  --length: 24;
  --offset: -38;
  stroke-dasharray: var(--length) var(--total-length);
  stroke-dashoffset: var(--offset);
  transition: all .8s cubic-bezier(.645, .045, .355, 1);
}

.menu circle {
  fill: transparent;
  opacity: 0;
}

/* label:hover circle {
  opacity: 1;
} */

.cross input:checked+svg .line--1,
  .cross input:checked+svg .line--3 {
    --length: 22.627416998;
  }

.cross input:checked+svg .line--2 {
    --length: 0;
  }

.menu--1 {
  background-color: #3f77e9;
}

.menu--1 .line--1,
  .menu--1 .line--3 {
    --total-length: 126.64183044433594;
  }

.menu--1 .line--2 {
    --total-length: 70;
  }

.menu--1 input:checked+svg .line--1,
    .menu--1 input:checked+svg .line--3 {
      --offset: -94.1149185097;
    }

.menu--1 input:checked+svg .line--2 {
      --offset: -50;
    }